<template>
	<view class="videodetail-container">
		
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" :indicator-dots="false" :current="cur" :circular="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
				<swiper-item v-for="(item, index) in videos" :key="item.id">
					<video :id="'player_' + index" ref="player" :src="item.video_url" :controls="false" :loop="true" @click="clickVideo"></video>
					<VideoLeft
						:source="item.source"
						:title="item.title"
					></VideoLeft>
					<VideoRight
						:id="item.id"
						:likestatus="item.likestatus"
						:likecount="item.likecount"
						@changeLikeStatus="getLikeStatus"
					></VideoRight>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import VideoLeft from '../../components/VideoLeft.vue'
	import VideoRight from '../../components/VideoRight.vue'
	
	export default {
		data() {
			return {
				id: 0,
				type: 0,
				videos: [],
				cur: 0,
				pageStarY: 0,
				PageEndY: 0
			}
		},
		methods: {
			async requestVideo() {
				const res = await this.$myRequest({
					url: '/video',
					method: 'POST',
					data: {
						video_type: this.type
					}
				})
				res.data.res.forEach(item => {
					item.likestatus = Boolean(item.likestatus)
				})
				for(let i=0;i<res.data.res.length;i++) {
					if(res.data.res[i].id === Number(this.id)) this.cur = i
				}
				this.videos = res.data.res
				console.log(this.videos)
			},
			change(event) {
				console.log(event.detail.current)
				this.cur = event.detail.current
				
				// 记录当前页面的视频信息
				this.id = this.videos[this.cur].id
				this.type = this.videos[this.cur].video_type
				clearTimeout(time)
				let time = setTimeout(() => {
					if(this.pageStarY > this.PageEndY) {
						console.log("向上滑动")
						console.log(this.$refs.player)
						this.$refs.player[this.cur].play()
						this.cur === 0 ? this.$refs.player[this.videos.length - 1].pause() : this.$refs.player[this.cur - 1].pause()
						this.pageStarY = 0
						this.PageEndY = 0
					}
					else {
						console.log("向下滑动")
						console.log(this.$refs.player)
						this.$refs.player[this.cur].play()
						this.cur === this.videos.length - 1 ? this.$refs.player[0].pause() : this.$refs.player[this.cur + 1].pause()
						this.pageStarY = 0
						this.PageEndY = 0
					}
				})
			},
			touchStart(event) {
				console.log(event.changedTouches[0].pageY)
				this.pageStarY = event.changedTouches[0].pageY
			},
			touchEnd(event) {
				console.log(event.changedTouches[0].pageY)
				this.PageEndY = event.changedTouches[0].pageY
			},
			clickVideo() {
				if(this.$refs.player[this.cur].playing) this.$refs.player[this.cur].pause()
				else this.$refs.player[this.cur].play()
			},
			async getLikeStatus(val) {
				val.likestatus = !val.likestatus
				val.likecount = val.likestatus ? val.likecount + 1 : val.likecount - 1
				await this.$myRequest({
					url: '/video/changeVideoStatus',
					method: 'POST',
					data: {
						video_id: val.id,
						likecount: val.likecount,
						likestatus: val.likestatus
					}
				})
				this.requestVideo()
			}
		},
		components: {
			VideoLeft,
			VideoRight
		},
		onLoad(options) {
			this.id = options.id
			console.log(this.id)
			this.type = options.type
			this.requestVideo()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		.videodetail-container {
			width: 100%;
			height: 100%;
			.swiper-box {
				width: 100%;
				height: 100%;
				background-color: $uni-bg-color-grey;
				.swiper {
					width: 100%;
					height: 100%;
					swiper-item {
						width: 100%;
						height: 100%;
						video {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
